
<template>
  <el-form ref="formRef" :model="formData" label-position="left" label-width="auto" class="zw-search-staff">
    <el-row class="el_filter_row" :gutter="20">
      <el-col :span="6">
        <el-form-item label="拉群任务">
          <el-input v-model="formData.name" placeholder="请输入任务名称" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="选择群聊">
          <el-select @click="showGroupBox" v-model="formData.groupchat_id" placeholder="请选择群聊">
            <el-option label="全部" :value="0"></el-option>
            <el-option v-for="item in groupOptions" :key="item" :label="item.name" :value="item.group_id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item  label="创建时间" class="filter_box">
          <el-date-picker class="filter_time" v-model="formData.create_time" type="datetimerange" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
          <el-button @click="onReset(formRef)">清空</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <!-- 群聊 -->
  <GroupChart ref="GroupChartRef" @submit="getGroupFun" :type="1" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import GroupChart from '@/components/chart/GroupChart.vue'
import { IsNotEmpty, getSetionId } from '@/utils/utils'
const formRef = ref<FormInstance>()
const emits = defineEmits(['search'])
const GroupChartRef = ref(null)
const groupchats = ref([])
const formData = reactive({
  id: 0,
  name: '',
  groupchat_id: 0, //群聊 -1全部
  create_time: []
  // key: 'add_time'
})
const groupOptions = ref([])
// 获取群聊
const getGroupFun = (val: any) => {
  console.log(val)
  groupOptions.value = [val]
  formData.groupchat_id = val.group_id
}

// 显示群聊
const showGroupBox = () => {
  GroupChartRef.value.appDialog.visible = true
  GroupChartRef.value.single = true
}
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      emits('search', formData)
    } else {
      return false
    }
  })
}
// 清空表单
const onReset = (formEl: FormInstance | undefined) => {
  formData.name = ''
  formData.groupchat_id = 0
  formData.create_time = []
  emits('search', formData)
}
</script>

<style lang="scss" scoped>
.zw-search-staff{
  margin:0 20px;
  padding: 16px 0;
}
</style>
